<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../../favicon.ico" rel="shortcut icon" />
<link href="../../base.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../jquery/jquery.js" type="text/javascript"></script>
<script src="../../ux/jquery.ux.js" type="text/javascript"></script>
<script src="../../event.drag/jquery.event.drag.js" type="text/javascript"></script>
<script src="../../event.drop/jquery.event.drop.js" type="text/javascript"></script>
<script src="../../ux.selectable/jquery.ux.selectable.js" type="text/javascript"></script>
<title>jquery.ux.selectable</title>
</head><body>

<a href="./">&laquo; Index</a>

<style type="text/css">
#thelist {
	list-style: none;
	margin: 0;
	padding: 0;
	}
#thelist li {
	background: #EEE;
	margin: 5px;
	padding: 5px;
	border: 1px solid #DDD;
	list-style: none;
	}
#thelist .ux-selectable-active {
	background-color: #FFC;
	}
#thelist .ux-selectable-selected {
	background-color: #4D6FD9;
	border-color: #4D6FD9;
	color: #EEE;
	}
.ux-selectable-selection {
	position: absolute;
	border: 1px solid #0F0;
	background: #CFC;
	filter: alpha(opacity=50);
	-moz-opacity: 0.50;
	opacity: 0.50;
	}
</style>

<script type="text/javascript">
jQuery(function($){
	$('#thelist').selectable();
	});
</script>

<h2>ux.selectable / defaults</h2>

<ul id="thelist">
	<li>Superman</li>
	<li>Batman</li>
	<li>Spider-Man</li>
	<li>Iron Man</li>
	<li>Radioactive Man</li>
	</ul>

</body></html>